<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    当前账户: 尊敬的<a style="color: blue;">admin</a>您好，您可以<a style="color: #405bd1; text-decoration: none;" href="../user/lists.jsp">返回用户列表</a>|<a style="color: #405bd1; text-decoration: none;" href="../index.jsp">退出当前账户</a><br/>
    <p class="shou" >欢迎来到管理员后台系统</p>
    <hr color="#808080" width="100%" size="1">
    <div style="text-align: center;">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="客户姓名">
          <el-input v-model="user" placeholder="请输入账号信息"></el-input>
        </el-form-item>
        <el-form-item label="客户年龄">
          <el-date-picker
              v-model="nian1"
              type="date"
              placeholder="年/月/日 --:--">
          </el-date-picker>
          ~
          <el-date-picker
              v-model="nian2"
              type="date"
              placeholder="年/月/日 --:--">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客户等级">
            <el-select  v-model="regions" placeholder="请选择客户级别">
                <el-option label="青铜级别" value="青铜级别"></el-option>
                <el-option label="白银级别" value="白银级别"></el-option>
                <el-option label="黄金级别" value="黄金级别"></el-option>
                <el-option label="钻石级别" value="钻石级别"></el-option>
              </el-select>
          </el-form-item>
        <el-form-item>
          <el-row>
            <el-button  style="background-color: rgb(240, 143, 8);" type="primary" icon="el-icon-search"></el-button>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button v-on:click="tian()" style="margin-left: 30px; margin-right: 0px;" type="primary">添加客户</el-button>
          <el-button v-on:click="pide(multipleTable)" style="margin-left: 0px;" type="danger">删除客户</el-button>
        </el-form-item>
      </el-form>
  </div>
  <div align="center">
    <template>
        <el-table ref="multipleTable" :data="users"  tooltip-effect="dark"  style="width: 70% ;margin: 0px auto;"  @selection-change="handleSelectionChange">
          <el-table-column  type="selection"  width="55">
          </el-table-column>

          <el-table-column  prop="id"  label="序号"  width="55">
          </el-table-column>

          <el-table-column    prop="name"  label="客户姓名"  width="80">
          </el-table-column>

          <el-table-column    prop="sex"    label="客户性别"   width="80">
          </el-table-column>

          <el-table-column   prop="nian" label="客户年龄" width="80">
          </el-table-column>

          <el-table-column  prop="date" label="客户生日"  width="120">
          </el-table-column>

          <el-table-column  prop="yue" label="客户余额"  width="80">
          </el-table-column>

          <el-table-column   label="客户爱好"  width="150"><template slot-scope="scope">{{aihao(scope.row.type)}}</template>
          </el-table-column>

          <el-table-column  prop="region"  label="客户级别"  width="100">
          </el-table-column>

          <el-table-column label="操作"  width="240">
            <template slot-scope="scope">
              <el-button v-on:click="xiu()" type="primary" >修改客户</el-button>
              <el-button v-on:click="delect(scope.row)" type="danger" >删除客户</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
        <el-pagination
        style="text-align: center; margin-top: 50px;"
        background
        layout="prev, pager, next"
        :total="1000">
        </el-pagination>
  </div>
  </div>
</body>


  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
            visible: false,
            nian1: '',
            nian2: '',
            user: '',
            regions:'',
            users: [{
                id:1,
                name:'张三',
                sex: '男',
                nian:'13',
                date: '2011-02-04',
                yue:'20036.2',
                type: ['1','3','4'],
                region: '青铜级别',
            }, {
                id:2,
                name:'张三',
                sex: '男',
                nian:'13',
                date: '2011-02-04',
                yue:'20036.2',
                type: ['1','3','4'],
                region: '青铜级别',
            }, {
                id:3,
                name:'张三',
                sex: '男',
                nian:'13',
                date: '2011-02-04',
                yue:'20036.2',
                type: ['1','3','4'],
                region: '青铜级别',
            }, {
                id:4,
                name:'张三',
                sex: '男',
                nian:'13',
                date: '2011-02-04',
                yue:'20036.2',
                type: ['1','3','4'],
                region: '青铜级别',
            }, {
                id:5,
                name:'张三',
                sex: '男',
                nian:'13',
                date: '2011-02-04',
                yue:'20036.2',
                type: ['1','3','4'],
                region: '青铜级别',
            }, {
                id:6,
                name:'张三',
                sex: '男',
                nian:'13',
                date: '2011-02-04',
                yue:'20036.2',
                type: ['1','3','4'],
                region: '青铜级别',
            }, {
                id:7,
                name:'张三',
                sex: '男',
                nian:'13',
                date: '2011-02-04',
                yue:'20036.2',
                type: ['1','3','4'],
                region: '青铜级别',
            }],
            multipleTable: []
        }
      },
      methods: {
        handleSelectionChange(val) {
          this.multipleTable = val;
        },
        aihao(type){
            var ss=''
            for(var ty in type){
                if(type[ty]=='1'){
                    ss+=" 篮球"
                }
                if(type[ty]=='2'){
                    ss+=" 足球"
                }
                if(type[ty]=='3' ){
                    ss+=" 排球"
                }
                if(type[ty]=='4'){
                    ss+=" 棒球"
                }
            }
            return ss
        },
        tian(){
            location.href="tian.jsp"
        },
        xiu(){
            location.href="xiu.jsp"
        },
        delect(row){
            this.users.splice(row,1)
        },
        pide(multipleTable){
          for(var mult in multipleTable){
            this.users.splice(multipleTable[mult],1);
          }
        }
      },
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
    })
  </script>
  <style scoped>
    .shou{
        margin-top: 50px;
        font-size: 45px;
        text-align: center;
        color: #474646;
    }
</style>
</html>